<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }">后台管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
      <el-breadcrumb-item>填写其他信息</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>

    <el-steps :active="active" align-center >
      <el-step title="添加类别" description="选择商品类别" icon="el-icon-circle-plus" ></el-step>
      <el-step title="填写其他信息" description="填写其他商品信息"  icon="el-icon-edit"></el-step>
      <el-step title="添加图片" description="添加商品图片" icon="el-icon-picture"></el-step>
      <el-step title="提交" description="检查提交"  icon="el-icon-upload" ></el-step>
    </el-steps>

    <el-divider></el-divider>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
      <el-form-item label="作者" prop="author">
        <el-input v-model="ruleForm.author"></el-input>
      </el-form-item><el-form-item label="书名" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="简介" prop="describe">
        <el-input v-model="ruleForm.describe"></el-input>
      </el-form-item>
      <el-form-item label="售价(元)" prop="money">
        <el-input v-model="ruleForm.money"></el-input>
      </el-form-item>

      <el-form-item label="出版时间" prop="houseTime">

          <el-date-picker
              v-model="ruleForm.houseTime"
              type="date"
              placeholder="选择日期"
             >
          </el-date-picker>

      </el-form-item>
      <el-form-item label="库存" prop="num">
        <el-input v-model="ruleForm.num"></el-input>
      </el-form-item>
      <el-form-item label="排序序号" prop="sort">
        <el-input v-model="ruleForm.sort"></el-input>
      </el-form-item>
      <el-form-item label="是否上架" prop="state">
        <el-switch
            v-model="ruleForm.state"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949">
        </el-switch>
      </el-form-item>

      <el-form-item>
        <el-button type="warning" @click="backToPreStep()">上一步</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">下一步</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>


<script>
export default {
  data() {
    return {
      ruleForm: {
        categoryId:"",
        categoryName:"",
        pressId:"",
        packId:"",

        name:'',
        money:100,
        state:1,
        houseTime:'',
        describe:'哈利波特1',
        num:20,
        sort:1,
        author:'J.K.罗琳'
      },
      pack:[
        {id:1,name:"hh"}
      ],
      press:[ {id:1,name:"hh"}],
      category: [],
      category_parent: [],
      category_children: [],
      active:2,
      rules: {
        author: [
          {required: true, message: '请输入作者名', trigger: 'blur'},

        ],
        name: [
          {required: true, message: '请输入书名', trigger: 'blur'},
        ],
        describe: [
          {required: true, message: '请输入描述', trigger: 'blur'},
        ],
        houseTime: [
          {required: true, message: '请输入或选择出版时间', trigger: 'blur'},
        ],
        money: [
          {required: true, message: '请输入售价', trigger: 'blur'},
        ],
        num: [
          {required: true, message: '请输入库存', trigger: 'blur'},
        ],
        sort: [
          {required: true, message: '请输入自定义排序', trigger: 'blur'},
        ],
      },
    };
  },
  methods: {
    backToPreStep() {
      this.$router.push('goodsAddNew');
    },
    loadLocalRuleForm() {
      let localRuleFormString = localStorage.getItem('ruleForm');
      if (localRuleFormString) {
        let localRuleForm = JSON.parse(localRuleFormString);
        if (localRuleForm.name) {
          this.ruleForm = localRuleForm;
        } else {
          this.ruleForm.categoryId=localRuleForm.categoryId;
          this.ruleForm.categoryName=localRuleForm.categoryName;
          this.ruleForm.pressId=localRuleForm.pressId;
          this.ruleForm.packId=localRuleForm.packId;
        }
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.ruleForm.categoryName=null;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let ruleFormString = JSON.stringify(this.ruleForm);
          localStorage.setItem('ruleForm', ruleFormString);
          console.log(this.ruleForm)
        this.$router.push('goodsAddNew2')
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },


   setValue(value, id) {
      this.ruleForm.categoryName=value;
      console.log(id)
   }

  },
  mounted() {
    this.loadLocalRuleForm();

  }
}
</script>

<style scoped>

</style>